import Link from 'next/link';
import Image from 'next/image';
import { Logo, LogoBX, LogoCC, LogoLtd } from 'src/components/Icons';
import { GithubFilled, WechatFilled, ZhihuCircleFilled } from '@ant-design/icons';
import { ArrowRightIcon } from '@heroicons/react/16/solid';
import { Profile } from './components/Profile';
import { ThemeController } from './components/ThemeController';
import clsx from 'clsx';

export default async function Home() {
  return (
    <div className="w-full min-h-screen bg-base-200 max-md:overflow-hidden">
      <header className="flex items-center justify-between p-5 backdrop-blur-lg sticky top-0 z-50">
        <div className="relative flex items-center gap-2">
          <span className="absolute top-0 left-0 size-5 rounded-full bg-purple-400 dark:bg-purple-900 z-0" />
          <Logo className="size-8 flex-none relative z-10" />
          <span className="text-xl font-zcool max-md:hidden">星恒云图</span>
        </div>
        <div className="flex items-center gap-5">
          <ThemeController />
          <a
            href="https://https://github.com/"
            target="_blank"
            rel="noopener noreferrer"
            className="text-2xl inline-grid size-10 place-items-center rounded-full hover:bg-gray-200 dark:hover:bg-neutral-700 transition-colors"
          >
            <GithubFilled />
          </a>
          <Profile className="ml-5" avatarClassName="ml-5" />
        </div>
      </header>
      <main className="relative flex flex-col items-center justify-center py-5 min-h-[calc(100vh-80px)]">
        <h2
          aria-label="slogan"
          className={clsx(
            'whitespace-nowrap text-5xl font-bold font-doto -mb-6 max-md:text-3xl max-md:mb-10',
            'bg-gradient-to-r from-purple-700 to-red-500 text-transparent bg-clip-text'
          )}
        >
          NEBULAE IMAGE CLOUD
        </h2>
        <div
          aria-label="hero"
          className="relative w-full max-w-5xl p-20 overflow-hidden max-md:px-5 max-md:pt-5"
        >
          <div
            aria-label="corner-line"
            className="absolute top-0 left-0 w-20 h-20 border-t-5 border-l-5 border-purple-600 rounded-tl-2xl"
          />
          <div
            aria-label="corner-line"
            className="absolute top-0 right-0 w-20 h-20 border-t-5 border-r-5 border-red-500 rounded-tr-2xl"
          />
          <div
            aria-label="corner-line"
            className="absolute bottom-0 left-0 w-20 h-20 border-b-5 border-l-5 border-pink-500 rounded-bl-2xl"
          />
          <div
            aria-label="corner-line"
            className="absolute bottom-0 right-0 w-20 h-20 border-b-5 border-r-5 border-yellow-500 rounded-br-2xl"
          />
          <div className="flex items-center gap-10 w-full max-md:flex-col">
            <div
              aria-label="native-code"
              className={clsx('flex-1 max-md:w-full', 'mockup-code shadow-2xl dark:brightness-75')}
            >
              <pre data-prefix="1">
                <code>{`<`}</code>
                <code className="text-success">{`figure`}</code>
                <code className="text-pink-600">{` className`}</code>
                <code className="text-warning">{`=`}</code>
                <code className="text-gray-400">{`"diff aspect-16/9"`}</code>
                <code>{`>`}</code>
              </pre>
              <pre data-prefix="2">
                <code className="pl-4">{`<`}</code>
                <code className="text-success">{`div`}</code>
                <code className="text-pink-600">{` className`}</code>
                <code className="text-warning">{`=`}</code>
                <code className="text-gray-400">{`"diff-item-1"`}</code>
                <code>{`>`}</code>
              </pre>
              <pre data-prefix="3">
                <code className="pl-8">{`<`}</code>
                <code className="text-success">{`img`}</code>
                <code className="text-pink-600">{` src`}</code>
                <code className="text-warning">{`=`}</code>
                <code className="text-gray-400">{`"https://images.nubulaedata.cn/image/system/photo.webp"`}</code>
                <code>{` />`}</code>
              </pre>
              <pre data-prefix="4">
                <code className="pl-4">{`</`}</code>
                <code className="text-success">{`div`}</code>
                <code>{`>`}</code>
              </pre>
              <pre data-prefix="5">
                <code className="pl-4">{`<`}</code>
                <code className="text-success">{`div`}</code>
                <code className="text-pink-600">{` className`}</code>
                <code className="text-warning">{`=`}</code>
                <code className="text-gray-400">{`"diff-item-2"`}</code>
                <code>{`>`}</code>
              </pre>
              <pre data-prefix="6">
                <code className="pl-8">{`<`}</code>
                <code className="text-success">{`img`}</code>
                <code className="text-pink-600">{` src`}</code>
                <code className="text-warning">{`=`}</code>
                <code className="text-gray-400">{`"https://images.nubulaedata.cn/image/system/photo.webp?blur=50"`}</code>
                <code>{` />`}</code>
              </pre>
              <pre data-prefix="7">
                <code className="pl-4">{`</`}</code>
                <code className="text-success">{`div`}</code>
                <code>{`>`}</code>
              </pre>
              <pre data-prefix="8">
                <code className="pl-4">{`<`}</code>
                <code className="text-success">{`div`}</code>
                <code className="text-pink-600">{` className`}</code>
                <code className="text-warning">{`=`}</code>
                <code className="text-gray-400">{`"diff-resizer"`}</code>
                <code>{`>`}</code>
                <code>{`</`}</code>
                <code className="text-success">{`div`}</code>
                <code>{`>`}</code>
              </pre>
              <pre data-prefix="9">
                <code>{`</`}</code>
                <code className="text-success">{`figure`}</code>
                <code>{`>`}</code>
              </pre>
            </div>
            <figure
              aria-label="code-render"
              className={clsx(
                'flex-1 max-md:w-full min-md:self-stretch max-md:aspect-16/9',
                'diff rounded-2xl shadow-2xl dark:brightness-75'
              )}
              tabIndex={0}
            >
              <div className="diff-item-1" role="img" tabIndex={0}>
                <Image
                  alt="nebulae-image"
                  src="/images/photo-demo.webp"
                  width={0}
                  height={0}
                  sizes="100vw"
                  priority
                  unoptimized
                />
              </div>
              <div className="diff-item-2" role="img">
                <Image
                  alt="nebulae-image"
                  src="/images/photo-demo-blur.webp"
                  width={0}
                  height={0}
                  sizes="100vw"
                  priority
                  unoptimized
                />
              </div>
              <div className="diff-resizer" />
            </figure>
          </div>
        </div>
        <div aria-label="guide" className="-mt-6">
          <Link href="/workbench">
            <button
              type="button"
              className="relative z-10 btn btn-lg border-none rounded-full text-white bg-gradient-to-r from-pink-500 via-red-400 to-yellow-500 hover:bg-gradient-to-l"
            >
              开始使用
              <ArrowRightIcon className="size-5" />
            </button>
          </Link>
        </div>
      </main>
      <footer className="flex flex-wrap justify-between gap-5 footer bg-neutral text-neutral-content py-10 px-20 max-md:flex-col max-md:gap-10">
        <aside className="flex items-center gap-5 min-w-sm">
          <div className="relative">
            <span className="absolute top-0 left-0 size-10 rounded-full bg-purple-800 z-0" />
            <Logo className="size-16 relative z-10" />
          </div>
          <div className="my-2 space-y-2 text-sm">
            <div className="font-zcool text-2xl font-medium">星恒云图</div>
            <div className="text-sm">响应式图片处理一站式解决方案</div>
          </div>
        </aside>
        <main className="flex flex-wrap gap-5 max-md:flex-col">
          <nav className="min-w-[200px]">
            <h6 className="footer-title text-base">商务</h6>
            <ul className="grid grid-flow-row gap-3 text-sm tracking-wider">
              <li className="flex items-center gap-2">
                <a href="https://biaoxun.nebulaedata.cn" className="hover:text-blue-500">
                  隐私条款
                </a>
              </li>
              <li className="flex items-center gap-2">
                <a href="http://cc.nebulaedata.cn" className="hover:text-blue-500">
                  服务协议
                </a>
              </li>
            </ul>
          </nav>
          <nav className="min-w-[200px]">
            <h6 className="footer-title text-base">Sass 服务</h6>
            <ul className="grid grid-flow-row gap-3 text-sm tracking-wider">
              <li className="flex items-center gap-2">
                <a href="https://biaoxun.nebulaedata.cn" className="hover:text-blue-500">
                  API文档
                </a>
              </li>
              <li className="flex items-center gap-2">
                <a href="http://cc.nebulaedata.cn" className="hover:text-blue-500">
                  使用说明
                </a>
              </li>
            </ul>
          </nav>
          <nav className="min-w-[200px]">
            <h6 className="footer-title text-base">更多产品</h6>
            <ul className="grid grid-flow-row gap-3 text-sm tracking-wider">
              <li className="flex items-center gap-2">
                <LogoBX className="size-5" />
                <a href="https://biaoxun.nebulaedata.cn" className="hover:text-blue-500">
                  韩非AI标讯
                </a>
              </li>
              <li className="flex items-center gap-2">
                <div className="size-5 bg-gray-400 rounded-full">
                  <LogoLtd className="size-5" />
                </div>
                <a href="http://han.nebulaedata.cn" className="hover:text-blue-500">
                  韩非文档
                </a>
              </li>
              <li className="flex items-center gap-2">
                <LogoCC className="size-5" />
                <a href="http://cc.nebulaedata.cn" className="hover:text-blue-500">
                  内容云
                </a>
              </li>
            </ul>
          </nav>
        </main>
        <aside>
          <h6 className="footer-title text-base">关注我们</h6>
          <div className="flex gap-5">
            <GithubFilled className="text-2xl" />
            <WechatFilled className="text-2xl" />
            <ZhihuCircleFilled className="text-2xl" />
          </div>
          <div className="mt-5">南京星恒数据科技有限公司</div>
        </aside>
      </footer>
    </div>
  );
}
